<template>
  <div id="main" :style="{ backgroundImage: `url(${backgroundimg})` }">
    <div>
      <!-- 顶部返回箭头 -->
      <div id="nav">
        <div class="back">
          <el-button icon="el-icon-back" @click="leftClick">Back to blog</el-button>
        </div>
      </div>
      <!-- 博客内容 -->
      <div id="blog-main-out">
        <div id="blog-main">
          <span id="blog-title">{{ blog.title }}</span>
          <!-- 分割线 -->
          <van-divider />
          <!-- 文章内容 -->
          <div id="blog-content"><span v-html="blog.value"></span></div>
          <!-- 分割线 带有文章日期 -->
          <van-divider>{{ blog.data }}</van-divider>
          <!-- 底部文章导航 -->
          <Detailbottom :nowId="id" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNavBar from "@/components/TopNavBar.vue";
import Detailbottom from "./components/Detailbottom.vue";

export default {
  components: {
    TopNavBar,
    Detailbottom,
  },
  data() {
    return {
      topTitle: "文章详情",
      blog: {},
      value: null,
      id: Number,
      backgroundimg: require("@/assets/xc4.jpg"),
    };
  },
  methods: {
    // 导航栏左点击返回博客列表页
    leftClick() {
      console.log("返回博客列表");
      this.$router.push({ path: "/blog" });
    },
  },
  created() {
    // 获取地址传值id
    this.id = this.$route.query.id;
    this.id = parseInt(this.id);
    console.log("当前博客"+this.id);
    // 根据id获取对应文章内容
    this.axios.get("/data/blogs.json").then((res) => {
      this.blog = res.data.blogs[this.id];
    });
  },
  watch: {
    // 路由刷新
    $route(to, from) {
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
}
#blog-main-out {
  padding: 7px;
}
#blog-main {
  margin-top: 10px;
  border-radius: 3px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 7px;
  font-family: STHeiti;
}
#blog-title{
  font-size: 15px;
}
.back{
  position:fixed;
}
.el-button {
  background:transparent;
  color: rgb(255, 255, 255);
  width: 60px;
  height: 5px;
  font-size: 5px;
  padding: 7px 10px;
}
</style>